<template>
	<div class="personinfo-container">
		<!-- 头像部分 -->
		<div class="headimage" @click="sheetVisible = !sheetVisible">
			<img src="../../static/venkman.jpg" class="clear">
			<h2>{{ persons[currentName].name }}</h2>
			<p>{{ persons[currentName].position }}</p>
		</div>
		<!-- 弹出操作栏（用于更换头像和LOGO） -->
		<mt-actionsheet
  			:actions="actions"
  			v-model="sheetVisible">
		</mt-actionsheet>
		<!-- 弹出操作栏（用于时间选择） -->
		<mt-datetime-picker
			ref="picker"
			type="date"
			v-model="value"
			year-format="{value} 年"
			month-format="{value} 月"
			date-format="{value} 日"
			:startDate = "startDate"
			:endDate = "endDate"
			@confirm="handleChange(value)">
		</mt-datetime-picker>
		<mt-datetime-picker
			ref="pickerTime"
			v-model="valueTime"
			type="time"
			@confirm="handleConfirm">
		</mt-datetime-picker>   
		<!-- 个人信息展示 -->
		<ul class="personinfo">
			<li @click="sheetVisible = !sheetVisible">&nbsp;&nbsp;<i class="iconfont">&#xe6e1;</i>&nbsp;应用LOGO更换<i class="arrow"></i></li>
			<li>&nbsp;&nbsp;<i class="iconfont">&#xe6e1;</i>&nbsp;店铺名称: {{ persons[currentName].store }}<i class="arrow"></i></li>
			<li>&nbsp;&nbsp;<i class="iconfont">&#xe6e1;</i>&nbsp;手机：{{ persons[currentName].phoneNumber }}<i class="arrow"></i></li>
			<li>&nbsp;&nbsp;<i class="iconfont">&#xe6e1;</i>&nbsp;座机：{{ persons[currentName].call }}<i class="arrow"></i></li>
			<li>&nbsp;&nbsp;<i class="iconfont">&#xe6e1;</i>&nbsp;邮箱：{{ persons[currentName].email }}<i class="arrow"></i></li>
			<li>&nbsp;&nbsp;<i class="iconfont">&#xe6e1;</i>&nbsp;公司名称：{{ persons[currentName].companyName }}<i class="arrow"></i></li>
			<li @click="open('picker')">&nbsp;&nbsp;<i class="iconfont">&#xe6e1;</i>&nbsp;选择日期：{{ valueDate }}<i class="arrow"></i></li>
			<li @click="open('pickerTime')">&nbsp;&nbsp;<i class="iconfont">&#xe6e1;</i>&nbsp;选择时间：{{ valueTime }}<i class="arrow"></i></li>
			<li>&nbsp;&nbsp;<i class="iconfont">&#xe6e1;</i>&nbsp;请假类型：{{ chooseSlot1 }} &nbsp;&nbsp;|&nbsp;&nbsp; 请假时间：{{ chooseSlot2 }}</li>
		</ul>
		<mt-picker 
			:slots="slots" 
			@change="onValuesChange" 
			:visible-item-count="3">
		</mt-picker> 
		<!-- 退出按钮 -->
		<router-link to="login"><div class="leave-btn"><i class="iconfont">&#xe6e1;</i>安全退出</div></router-link>
	</div>
</template>
<script type="text/javascript">
	import { mapGetters,mapState,mapActions } from 'vuex'

	export default{
		data() {
			let actions = [
				{name:'拍照'}, 
				{name:'从手机相册中选取'}
			]
			let now = new Date()
			let sheetVisible = false
			let value = now
			let valueTime = null
			let startDate = new Date('2014')
			let endDate = new Date()
			let slots =  [  
                {  
                  flex: 1,  
                  values: ['请选择','年假', '事假', '病假', '婚假', '其他'],  
                  className: 'slot1',  
                  textAlign: 'left'  
                }, {  
                  divider: true,  
                  content: '-',  
                  className: 'slot2'  
                }, {  
                  flex: 1,  
                  values: ['请选择','2015-11', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],  
                  className: 'slot3',  
                  textAlign: 'right'  
                }  
			]  
			let slotCategory = null
			let slotDate = null
			return {actions, now, sheetVisible, value, valueTime, startDate, endDate, slots, slotCategory, slotDate}
		},
		computed: mapState({
			persons: state => state.persons.persons,
			currentName: state => state.persons.currentName,
			valueDate(){
				return this.value.getFullYear()+'/'+ (this.value.getMonth()+1) +'/'+ this.value.getDate();
			},
			chooseSlot1(){
				if(this.slotCategory){
					return this.slotCategory;
				}else{
					return '请选择';
				}	
			},
			chooseSlot2(){
				if(this.slotDate){
					return this.slotDate;
				}else{
					return '请选择';
				}	
			}
		}),
		mounted(){  
			this.handleChange(this.value)
  		},  
		methods: {
			open(picker) {
				this.$refs[picker].open();
			},
			handleChange(value) {
				console.log(value);
			},
			handleConfirm() {
				console.log(this.valueTime)
			},
			onValuesChange(picker, values) {  
				this.slotCategory = values[0]
				this.slotDate = values[1]
				console.log(values)  
			}  
		}
	}
</script>
<style type="text/css" scoped>
	.personinfo-container{
        position: absolute;
        top: 40px;
        width:100%;
        text-align: left;
	}
	.headimage{
		height: 70px;
		border-bottom: 1px solid #efefef;
		background-color: #ffffff;
		position: relative;
	}
	.headimage img{
		float: left;
		width: 60px;
		height: 60px;
		border-radius: 5px;
		margin: 5px 5px 0 10px;
	}
	.headimage h2{
		position: absolute;
		top: 5px;
		left: 80px;
		font-size: 20px;
		font-weight: 1000;
	}
	.headimage p{
		margin-top:-5px;
		color: #c1c1c1;
		position: absolute;
		left: 80px;
		bottom: 10px;
	}
	.personinfo{
		height: 280px;
        overflow-y: scroll;
	}
	.personinfo li{
		width: 100%;
		height: 30px;
		padding: 5px 0;
		background-color: #ffffff;
		border-bottom: 1px solid #efefef;
		line-height: 30px;
		position: relative;
		font-size: 16px;
		color: #6E6D6D;
	}
	.arrow{
		border: 2px solid #c8c8cd;
        border-bottom-width: 0;
        border-left-width: 0;
        content: " ";
        top: 50%;
        right: 20px;
        position: absolute;
        width: 5px;
        height: 5px;
        -webkit-transform: translateY(-50%) rotate(45deg);
        transform: translateY(-50%) rotate(45deg);
	}
	.leave-btn{
		width: 200px;
		height: 50px;
		margin: 30px auto;
		background-color: #F62929;
		line-height: 50px;
		color: #ffffff;
		font-size: 20px;
		text-align: center;
		border-radius: 5px;
		box-shadow: 1px 1px 2px #efefef;
	}
</style>